<template>
  <div>
    <div class="left">
      <div class="leftContent">
        <div class="round"></div>
        <div class="topic">
          <span>ORDER聚造</span>
          <div class="right3">
            <i class="el-icon-s-unfold"></i>
          </div>
        </div>
        <el-menu
          default-active="1-4"
          background-color="transparent"
          text-color="#aaa"
          active-text-color="#fff"
        >
          <!-- 遍历一级菜单 -->
          <el-submenu v-for="menu in menus" :key="menu.id" :index="menu.id">
            <template slot="title">
              <span><i :class="menu.img"></i>{{menu.name}}</span>
            </template>
            <!-- 遍历二级菜单 -->
            <el-menu-item v-for="childMenu in menu.children" :key="childMenu.id" :index="childMenu.id" @click="$router.push(childMenu.url)">
              <div class="menuItem">
                <div class="menuText">{{childMenu.name}}</div>
                <!-- <div class="menuActive"></div> -->
              </div>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
    </div>
    <div class="right">
      <div class="block">
        <b>{{ $route.meta.title }}</b>
        <div class="right1">
          <el-avatar :size="50" :src="photo"></el-avatar>
          <div class="right2">
            <span style="color: #eab924;margin:0px 8px;"><b>{{group.groupName}}</b></span>
            <el-tooltip placement="bottom">
              <div slot="content" @click="dialogFormVisible=true" class="cursor">修改密码</div>
              <span class="cursor">{{ nickName }}</span>
            </el-tooltip>
            <span>，你好！</span>
            <el-button
              type="danger"
              size="small"
              round
              icon="el-icon-switch-button"
              @click="logout"
              >退出</el-button
            >
            <el-button type="text" @click="$router.push('/index/productList')">跳转商品列表</el-button>
          </div>
        </div>
      </div>

      <router-view></router-view>
    </div>
    <el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="400px">
      <el-form :model="form" ref="form" :rules="rules" label-width="100px">
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="form.userName"></el-input>
        </el-form-item>
        <el-form-item label="旧密码" prop="password">
          <el-input type="password" v-model="form.passWord"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassWord">
          <el-input type="password" v-model="form.newPassWord"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="changePassWord">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import md5 from 'js-md5'
export default {
  name: "index",
  components: {},
  data() {
    return {
      photo: "",
      nickName: "",
      dialogFormVisible:false,
      form:{
        passWord:'',
        newPassWord:'',
        userName:''
      },
      group:{//选中的群组
        groupId:'',
        groupName:''
      },
      menus:[],//菜单树
      rules:{
        userName:[
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        passWord:[
          { required: true, message: '请输入旧密码', trigger: 'blur' }
        ],
        newPassWord:[
          { required: true, message: '请输入新密码', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    changePassWord(){
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$http({
            url:'/changePassWord',
            method:'POST',
            data:{
              passWord:md5(this.form.passWord),
              newPassWord:md5(this.form.newPassWord),
              userName:this.form.userName
            }
          }).then(res => {
            if(!res.errorMsg){
              this.$message({
                message: '修改密码成功',
                type: 'success'
              });
              location.href = '/login'
            }
          })
        } else {
          return false;
        }
      })
    },
    logout() {
      this.$confirm("是否退出登录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$http({
          url: "/logout",
        }).then((res) => {
          if (res.errorMsg) {
            this.$message.error(res.errorMsg);
          } else {
            location.href = "/login";
          }
        })
      })
    },
    getMenus(){
      this.$http({
        url: "/v1/leftMenuTree",
        params:{
          groupId:this.group.groupId
        }
      }).then((res) => {
        //测试用模拟菜单数据
        res[0].url = '/index/userList'
        res[1].children[0].url = '/index/userList'
        res[1].children[1].url = '/index/menu'
        res[1].children[2].url = '/index/userList'
        res[1].children[3].url = '/index/groupList'
        if(!res.errorMsg) this.menus = res
      })
    }
  },
  created() {
    //从缓存获取登录用户信息
    let user = localStorage.getItem("user");
    //解析为对象
    user = JSON.parse(user);
    //设置头像
    this.photo = user.photo || require("../assets/photo.png");
    //设置昵称
    this.nickName = user.nickName || "小王";
    //设置群组信息
    if(user.groups.length) this.group = user.groups[0]//默认第一个
    //获取菜单
    this.getMenus()
  },
  mounted() {}
};
</script>

<style scoped>
.compont {
  line-height: 32px;
  cursor: pointer;
}

.left {
  background: url(../assets/19.png);
  background-size: 100% 100%;
  color: #fff;
  width: 293px;
  left: 0px;
  top: 0px;
  bottom: 0px;
  position: fixed;
  font-size: 16px;
  color: #aaaaaa;
}
.leftContent{
  width: 293px;
}

.right {
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  margin-left: 295px;
  background-color: #eff6fc;
}
.right1 {
  float: right;
  margin-right: 50px;
  margin-top: -10px;
}
.right2 {
  float: right;
  margin-top: 10px;
}
.right3 {
  display: flex;
  justify-content: center;
  align-content: center;
}
.round {
  width: 44px;
  height: 29px;
  border-radius: 0 0 22px 22px;
  opacity: 0.5;
  margin-left: 27px;
  background: linear-gradient(0deg, #000000 0%, #aba6a6 100%);
}
.topic {
  margin-top: -20px;
  margin-left: 70px;
  opacity: 1;
  font-size: 20px;
  font-family: Microsoft YaHei UI, Microsoft YaHei UI-Bold;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-content: center;
}
.topic i {
  /* padding: 20px; */
  margin-left: 60px;
  justify-content: center;
  align-content: center;
}
.login {
  margin-top: 40px;
  margin-left: 25px;
}
.login1 {
  margin-left: 10px;
}
.data {
  width: 95%;
  margin: 40px auto;
  background-color: #ffffff;
  height: 70px;
  line-height: 70px;
}
.block {
  padding-top: 40px;
  padding-left: 30px;
}
.demonstration {
  margin-left: 30px;
  margin-right: 30px;
}

.button {
  margin-top: -70px;
  margin-left: 380px;
}
.message {
  width: 95%;
  margin: 50px auto;
  padding-top: 10px;

  border: 1px solid #ccc;
  background-color: #fff;
}
.message1 {
  margin: 0 10px 30px 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 18px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 18px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 18px;
}
.menuItem{
  display: flex;
  align-items: center;
  margin-left:8px;
}
.menuText{
  flex: 1;
}
.menuActive{
  width: 5px;
  height: 26px;
  background: #ed0606;
}
.el-submenu .el-menu-item{
  padding-right: 8px;
}
.cursor{
  cursor: pointer;
}
@media screen and (max-width: 1440px) {
  .left {
    width: 235px;
  }
  .leftContent{
    transform-origin: 0 0;
    transform: scale(0.8);
  }
  .right {
    margin-left: 240px;
  }
  .block {
    padding-top: 32px;
    padding-left: 24px;
    font-size:14px;
  }
  .right1{
    margin-right: 40px;
  }
}
</style>
